<template>
	<div class="store-home">
		<search-bar></search-bar>
		<!-- 推荐模块翻页动画组件 -->
		<flap-card :data="random"></flap-card>
		<scroll :top="scrollTop" @onScroll="onScroll" ref="scroll">
			<div class="banner-wrapper">
				<div class="banner-img" :style="{backgroundImage:`url('${banner}')`}"></div>
			</div>
			<!-- 猜你喜欢区域 -->
			<guess-you-like :data="guessYouLike"></guess-you-like>
			<!-- 热门推荐区域 -->
			<recommend :data="recommend" class="recommend"></recommend>
			<!-- 精选区域 -->
			<featured :data="featured" :titleText="$t('home.featured')" :btnText="$t('home.seeAll')" class="featured"></featured>
			<!-- 分类区域 -->
			<div class="category-list-warpper" v-for="(item, index) in categoryList" :key="index">
				<category-book :data="item"></category-book>
			</div>
			<!-- 分类统计区域 -->
			<category class="categories" :data="categories"></category>
		</scroll>
	</div>
</template>

<script>
import SearchBar from '../../components/home/SearchBar'
import Scroll from '../../components/common/Scroll'
import FlapCard from '../../components/home/FlapCard'
import { storeHomeMixin } from '../../utils/mixin'
import { home } from '../../api/store'
import GuessYouLike from '../../components/home/GuessYouLike'
import Recommend from '../../components/home/Recommend'
import Featured from '../../components/home/Featured'
import CategoryBook from '../../components/home/CategoryBook'
import Category from '../../components/home/Category'

export default {
	mixins: [storeHomeMixin],
	components: {
		SearchBar,
		Scroll,
		FlapCard,
		GuessYouLike,
		Recommend,
		Featured,
		CategoryBook,
		Category
	},
	data() {
		return {
			scrollTop: 94,
			random: null,
			// banner不能定义为null因为后面会异步赋值
			banner: '',
			guessYouLike: null,
			recommend: null,
			featured: null,
			categoryList: null,
			categories: null
		}
	},
	methods: {
		onScroll(offsetY) {
			// 捕捉Y轴的偏移量
			this.setOffsetY(offsetY)
			if (offsetY > 0) {
				this.scrollTop = 52
			} else {
				this.scrollTop = 94
			}
			this.$refs.scroll.refresh()
		}
	},
	mounted() {
		// 发起请求
		home().then(response => {
			if (response && response.status === 200) {
				const data = response.data
				// console.log(data)
				const randomIndex = Math.floor(Math.random() * data.random.length)
				this.random = data.random[randomIndex]
				this.banner = data.banner
				this.guessYouLike = data.guessYouLike
				this.recommend = data.recommend
				this.featured = data.featured
				this.categoryList = data.categoryList
				this.categories = data.categories
			}
		})
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/styles/global.scss";
	.store-home {
		width: 100%;
		height: 100%;
		.banner-wrapper {
			width: 100%;
			padding: px2rem(10);
			box-sizing: border-box;
			.banner-img {
				width: 100%;
				height: px2rem(150);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
		.recommend {
			margin-top: px2rem(20)
		}
		.featured {
			margin-top: px2rem(20);
		}
		.category-list-warpper {
			margin-top: px2rem(20);
		}
		.categories {
			margin-top: px2rem(20);
		}
	}
</style>
